<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>考题修改</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/common.js"></script>
</head>
<style>
    .container {
        margin-top: 100px;
        padding: 50px 200px 50px 50px;
        border: 1px solid #eee;
        box-shadow: 0 0 20px #ccc;
    }
</style>
<body>
<div id="app">
    <el-row>
        <el-col :span="10" :offset="7">
            <div class="container">
                <el-form ref="form" :model="form" label-width="120px">
                    <el-form-item label="考题内容">
                        <el-input v-model="form.quesContent"></el-input>
                    </el-form-item>
                    <el-form-item label="正确答案">
                        <el-input v-model="form.right"></el-input>
                    </el-form-item>
                    <el-form-item label="错误答案">
                        <el-input v-model="form.wrong"></el-input>
                    </el-form-item>
                    <el-form-item label="解析">
                        <el-input type="textarea" v-model="form.analysis"
                                  :autosize="{ minRows: 4, maxRows: 10}"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即修改</el-button>
                        <el-button @click="cancel">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                id: null,
                form: {}
            }
        },
        methods: {
            // 提交
            onSubmit() {
                const loading = showLoading(this);
                axios.post('/questions/t-questions', this.form)
                    .then(res => {
                        console.log(res);
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        loading.close();
                        setTimeout(function () {
                            window.location.href = './questionsManager.html'
                        }, 1000)
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            // 获取考题信息
            getQues() {
                const loading = showLoading(this);
                axios.get(`/questions/t-questions/ques/${this.options.id}`)
                    .then(res => {
                        this.form = res.data.model;
                        loading.close();
                    })
                    .catch(err => {
                        console.log(err);
                        loading.close();
                    })
            },
            // 取消，返回考题列表页
            cancel() {
                window.location.href = './questionsManager.html'
            }
        },
        mounted() {
            getUrlParam(this);
            this.id = this.options.id;
            this.getQues()
        }
    })
</script>
</html>